<template>
  <page class="movie">
    <page-header :show-back="false">猫眼电影</page-header>
    <ul class="navBar">
      <li :class="{active:pageType==0}" @click="pageType=0">正在热映</li>
      <li :class="{active:pageType==1}" @click="pageType=1">即将上映</li>
    </ul>
    <div class="swiperContent">
      <swiper ref="mySwiper" :options="swiperOption" class="indexSwiper">
        <swiper-slide class="swiperItem">
          <Hot></Hot>
        </swiper-slide>
        <swiper-slide class="swiperItem" style="background-color:lightgray">第二项</swiper-slide>
      </swiper>
    </div>
  </page>
</template>

<script>
import pageHeader from "../components/PageHeader";
import Hot from "../components/Hot";
export default {
  name: "Movie",
  data() {
    return {
      pageType: 0
    };
  },
  watch: {
    pageType(newValue) {
      this.mySwiper.slideTo(newValue);
    }
  },
  created() {
    
  },
  computed: {
    swiperOption() {
      var that = this;
      return {
        on: {
          slideChange: function() {
            that.pageType = this.activeIndex;
          }
        }
      };
    },
    mySwiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {
    
  },
  components: {
    pageHeader,
    Hot
  }
};
</script>

<style scoped lang="scss">
@import "../assets/css/comm.scss";
.movie {
  display: flex;
  flex-direction: column;
}
.navBar {
  display: flex;
  flex-direction: row;
  height: 0.8rem;
  width: 100%;
  > li {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-bottom: 0.04rem solid #ececec;
    &.active {
      border-bottom-color: $primaryColor;
      color: $primaryColor;
    }
  }
}
.swiperContent {
  flex: 1;
  overflow: scroll;
}
.indexSwiper {
  height: 100%;
}
.swiperItem {
  height: 100%;
  overflow: scroll;
}
</style>
